<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 800px;
            height: 500px;
        }

        #main1 {
            width: 500px;
            height: 500px;
        }

        #main2 {
            width: 650px;
            height: 500px;
        }

        #main3 {
            width: 800px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <div id="main1"></div>
    <div id="main2"></div>
    <div id="main3"></div>

    <!-- JQuery引入 -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <!-- 图表js引入 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>

    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var myChart3 = echarts.init(document.getElementById('main3'));


        option = {
            title: {
                text: '通知公告',
                padding: [20, 15]
            },
            series: [{
                type: "tree",
                symbolSize: 50, //标记大小
                symbol: 'circle',  //标记样式
                edgeShape: 'polyline',
                edgeForkPosition: '50%',
                initialTreeDepth: 3,  //几级标题
                orient: 'TB', //方向
                right: 260,
                top: 80,

                itemStyle: {
                    borderColor: '#FF7F00',
                    borderWidth: 3,
                    color: 'white',
                },
                label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        fontSize: 10,
                    },
                },

                data: [{
                    name: `公司员工守则\n\n2018-11-1`,
                    children: [
                        {
                            name: `关于交易手续费优惠政策的通知\n\n2018-10-19`,
                            children: [{
                                name: `国庆节安排通知\n\n2018-10-01`,
                                children: [{
                                    name: `818促销日：全场满5000送500\n\n2018-08-18`
                                }]
                            }]
                        }]
                }],

            }]
        }
        myChart1.setOption(option);




        $.ajax({
            type: 'GET',
            url: 'https://www.zzgoodqc.cn/index.php/index/index/getOrders',
            dataType: 'json',
            success: (rel) => {
                // console.log(rel);
                option = {
                    title: {
                        text: '订单统计趋势图',
                        top: '20px',
                        left: '20px'
                    },
                    backgroundColor: '#fff',
                    color: [
                        'plum',
                        'rgb(73, 151, 240)',
                        '#6E40F2',
                        '#FF61E6',
                        '#8B5CFF',
                        '#00CA69',
                    ],
                    legend: {
                        top: '10%',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    grid: {
                        top: '20%',
                        left: '4%',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}月',
                                textStyle: {
                                    color: '#333',
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#D9D9D9',
                                },
                            },
                            data: ['4', '5', '6', '7', '8', '9'],
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                textStyle: {
                                    color: '#666',
                                },
                            },
                            nameTextStyle: {
                                color: '#666',
                                fontSize: 12,
                                lineHeight: 40,
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#E9E9E9',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: '总金额',
                            type: 'line',
                            smooth: true,
                            // showSymbol: false,/
                            symbolSize: 8,
                            zlevel: 3,
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: '#23CF9C30',
                                            },
                                            {
                                                offset: 1,
                                                color: '#23CF9C10',
                                            },
                                        ],
                                        false,
                                    ),
                                    shadowColor: '#23CF9C10',
                                    shadowBlur: 10,
                                },
                            },
                            data: rel.data.arr
                        },
                        {
                            name: '订单数',
                            type: 'line',
                            smooth: true,
                            // showSymbol: false,
                            symbolSize: 8,
                            zlevel: 3,
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: '#578FFB30',
                                            },
                                            {
                                                offset: 1,
                                                color: '#578FFB10',
                                            },
                                        ],
                                        false,
                                    ),
                                    shadowColor: '#578FFB10',
                                    shadowBlur: 10,
                                },
                            },
                            data: rel.data.list,
                        },
                    ],
                }
                myChart.setOption(option);
            },
            error: (e) => {
                console.log(e);
            }
        })




        option = {
            title: {
                text: '订单商品数',
                top: '20px',
                left: '20px'
            },
            legend: {
                orient: 'vertical',
                right: '100px',
                top: '45%',
                icon: 'circle',
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    fontSize: '15px'
                }
            },
            color: ["rgb(67, 126, 244)", "rgb(228, 99, 99)", "rgb(242, 224, 63)", "plum"],
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['22%', '30%'],
                    center: ['30%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        // position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            formatter(param) {
                                return param.name + ' (' + param.percent * 2 + '%)';
                            },
                            color: '#282828',
                            fontSize: 14,
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#4DA5E0'
                            }
                        }
                    },
                    data: [
                        { value: 4260, name: '今日                      4260' },
                        { value: 3970, name: '比昨日                 +3970' },
                        { value: 3454, name: '本周                      3454' },
                        { value: 2390, name: '上周同期               -2390' },
                    ]
                },
                {
                    name: '总销售',
                    type: 'pie',
                    radius: ['0%', '0%'],
                    center: ['30%', '50%'],
                    itemStyle: {
                        color: 'transparent'
                    },
                    label: {
                        position: 'inside',
                        formatter: `{data|{c}}\n{serie|{a}}`,
                        rich: {
                            data: {
                                fontWeight: '400',
                                fontSize: 24,
                                color: 'black',
                                fontWeight: 'bold',
                                lineHeight: 36,
                                textBorderColor: `transparent`,
                                textBorderWidth: 0
                            },
                            serie: {
                                fontSize: 16,
                                color: `black`,
                                textBorderColor: `transparent`,
                                textBorderWidth: 0
                            }
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [253090]
                }
            ]
        };
        myChart2.setOption(option);


        option = {
            //你的代码
            title: {
                text: '订单数',
                top: '20px',
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(13,5,30,.6)',
                borderWidth: 1,
                borderColor: 'white',
                padding: 5,
                textStyle: {
                    color: 'black'
                }
            },
            title: {
                show: false
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(13,5,30,.6)',
                borderWidth: 1,
                borderColor: 'white',
                padding: 5,
                textStyle: {
                    color: 'black'
                }
            },
            legend: {
                right: 'center',
                top: 5,
                icon: 'circle',
                itemWidth: 14,
                itemHeight: 10,
                itemGap: 37,
                textStyle: {
                    fontSize: 14,
                    fontFamily: 'Source Han Sans CN',
                    fontWeight: 'normal',
                    color: 'black'
                }
            },
            grid: {
                x: '3%',
                y: '15%',
                x2: '5%',
                y2: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    color: 'black',
                    fontSize: 14,
                    interval: 0,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'gray'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'gray',
                        type: "dotted",
                    }
                },
                data: ["11.07", "11.08", "11.09", "11.10", "11.11", "11.12", "11.13"]
            },
            yAxis: [{
                type: 'value',
                min: 0,
                position: 'left',
                nameTextStyle: {
                    color: "black",
                    fontSize: 14,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'gray'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'gray',
                        type: "dotted",
                    }
                },
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: "black",
                    }
                },
            },
            {
                type: 'value',
                // name: '降水量',
                min: 0,
                max: 100,
                position: 'right',
                axisLabel: {
                    formatter: '{value}%'
                }
            }, {
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#707070',
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: true,
                    inside: true,
                    lineStyle: {
                        color: 'black',
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#384267"
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: 'black',
                        fontSize: 18
                    },
                },

            },
            {
                type: 'value',
            }
            ],
            series: [{
                name: '比作日',
                type: 'bar',
                barWidth: 14,
                barGap: '40%',
                itemStyle: {
                    borderWidth: 1,
                    borderRadius: [3, 3, 0, 0],
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#A5ADFF' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#9B69EC' // 100% 处的颜色
                        }]
                    }
                },
                data: [3, 2.5, 2.6, 2.4, 2.5, 5, 2.9]
            }, {
                name: '上周同期',
                type: 'bar',
                barWidth: 14,
                barGap: '40%',
                itemStyle: {
                    borderWidth: 1,
                    borderRadius: [3, 3, 0, 0],
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#E1B031' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#FF8143' // 100% 处的颜色
                        }]
                    }
                },
                data: [3.5, 2.8, 2.5, 2.3, 2.6, 4.1, 3.5]
            }, {
                name: '上月同期',
                type: 'bar',
                barWidth: 14,
                barGap: '40%',
                itemStyle: {
                    borderWidth: 1,
                    borderRadius: [3, 3, 0, 0],
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#00BEFF' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#247FFF' // 100% 处的颜色
                        }]
                    }
                },
                data: [10, 25, 10, 15, 21, 20, 35]
            }]
        };
        myChart3.setOption(option);

    </script>
</body>

</html>